<template>
  <span class="demonstration">{{ widget.options.radioText }}</span>
  <el-radio-group
    v-model="radioModel"
    :style="{ display: widget.options.displayStyle }"
    :size="widget.options.size"
    :disabled="widget.options.disabled"
    :validate-event="widget.options.validateEvent"
    @change="selectField"
  >
    <slot></slot>
    <template v-if="!!widget.options.buttonStyle">
      <el-radio-button
        v-for="(item, index) in widget.options.optionItems"
        :key="index"
        :label="item.value"
        :disabled="item.disabled"
        :border="widget.options.border"
        :textColor="widget.options.textColor"
        :fill="widget.options.fill"
        :style="{ display: widget.options.displayStyle }"
        >{{ item.label }}</el-radio-button
      >
    </template>
    <template v-else>
      <el-radio
        v-for="(item, index) in widget.options.optionItems"
        :key="index"
        :label="item.value"
        :disabled="item.disabled"
        :border="widget.options.border"
        :style="{ display: widget.options.displayStyle }"
        >{{ item.label }}</el-radio
      >
    </template>
  </el-radio-group>
</template>

<script setup>
import { ref, watch } from "vue";
import { assignmentWidget } from "@/views/pageDesign/components/globalVariable";

defineOptions({
  name: "radioWidget",
  inheritAttrs: false,
});

let $props = defineProps({
  widget: {
    type: Object,
    required: true,
  },
});
let radioModel = ref(null);

let selectField = () => {
  assignmentWidget($props.widget);
};
</script>

<style lang="scss" scoped>
.demonstration {
  margin-right: 10px;
}

.radio-group-block {
  display: block !important;
}
</style>
